<!--
 * @Description:第二十六章（深入v-model）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-19 11:46:48
-->
<template>
  <div>
    <div v-if="modelValue" class="model">
      <div class="close">
        <el-button type="info" @click="close">关闭</el-button>
      </div>
      <h4>我是子组件 dialog</h4>
      <p>接收到父组件modelValue传值： {{ modelValue }}</p>
      <p>emit</p>
      <div>内容：<input type="text" :value="diyVal" @input="change1" /></div>
      <p>自定义修饰符input</p>
      <p>接收到父组件isBt传值： {{ props?.diyValBModifiers?.isBt }}</p>
      <div>内容：<input type="text" :value="diyValB" @input="change2" /></div>
    </div>
  </div>
</template>
<script setup lang="ts">
// vue2 接收值是value，Vue3接收值是modelValue
// 自定义修饰符中，Modifiers这串字符是固定的，比如modelValue的就是modelValueModifiers，diyVal就是diyValModifiers
const props = defineProps<{
  modelValue: boolean
  diyVal: string
  diyValB: string
  diyValBModifiers?: {
    isBt: boolean
  }
}>()

const emit = defineEmits(['update:modelValue', 'update:diyVal', 'update:diyValB'])

const close = () => {
  emit('update:modelValue', false)
}

const change1 = (el: Event) => {
  let target = el.target as HTMLInputElement
  emit('update:diyVal', target.value)
}

const change2 = (el: Event) => {
  let target = el.target as HTMLInputElement
  emit('update:diyValB', props?.diyValBModifiers?.isBt ? target.value + '变态' : target.value)
}

// const show = ref<Props>(isShow)
</script>
<style scoped>
.model {
  width: 500px;
  border: 5px solid #ccc;
  padding: 10px;
}
</style>
